<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.content {
			width: 100px;
			height: 100px;
			border: 1px solid #000;
		}
	</style>
</head>

<body>
	<div>
		<div id="root"></div>
		<div class="content" id="content"> </div>
	</div>
	<script>

		const content = document.getElementById('content');
		const root = document.getElementById('root');
		const btn1 = document.getElementById('btn1');

		// 数据初始化
		const arr = [
			{
				id: 'btn1',
				text: "按钮1",
				value: "这是按钮1的值"
			},

			{
				id: 'btn2',
				text: "按钮2",
				value: "这是按钮2的值"
			},
			{
				id: 'btn3',
				text: "按钮3",
				value: "这是按钮3的值"
			},
		]



		const renderBtnDom = () => {

			arr.forEach(e => {

				let result = `<button id="${e.id}" onclick="btnEvent('${e.value}')">${e.text}</button>`
				// console.log(result);
				root.innerHTML += result
				const btnTemp = document.getElementById(e.id)
				// console.log(`${e.id}`.onclick);
			})
		}
		renderBtnDom()

		const btnEvent = (v) => {
			// console.log(btnEvent);

			content.innerHTML = v
		}



	</script>
</body>

</html>